<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-row>
        <el-col :span="21">
          <i class="el-icon-search"></i>
          <span class="search-title">筛选搜索</span>
        </el-col>
        <el-col :span="3" style="display: flex;justify-content: end">
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        </el-col>
      </el-row>
      <el-form :model="body" ref="queryForm" :inline="true" size="small" label-width="140px">
        <el-form-item label="用户电话:" prop="phoneNumber">
          <el-input v-model="body.phoneNumber" placeholder="请输入用户电话" clearable />
        </el-form-item>
        <el-form-item label="用户名称:" prop="name">
          <el-input v-model="body.name" placeholder="请输入用户名称" clearable />
        </el-form-item>
        <el-form-item label="反馈时间:" prop="feedbackTime">
          <el-date-picker v-model="feedbackTime" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" @change="changeTime" @clear="clearTime" />
        </el-form-item>
        <el-form-item label="处理人:" prop="handler">
          <el-input v-model="body.handler" placeholder="请输入处理人" clearable />
        </el-form-item>
        <el-form-item label="是否处理:" prop="isHandled">
          <el-select v-model="body.isHandled" clearable placeholder="请选择">
            <el-option v-for="item in handleOption" :key="item.id" :label="item.value" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="反馈类型:" prop="feedbackType">
          <el-select v-model="body.feedbackType" clearable placeholder="请选择">
            <el-option v-for="item in feedbackOption" :key="item.id" :label="item.value" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <i class="el-icon-tickets"></i>
      <span style="padding-left: 6px;">数据列表</span>
    </el-card>
    <feed-back-table title="反馈列表" :queryParams="queryParams" :feedbackContent="feedbackList" />
    <!-- 分页器 -->
    <pagination v-show="true" :total="total" @pagination="handlePagination" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" />
  </div>
</template>

<script>
import FeedBackTable from "@/components/FeedBackTable/index";
import { getFeedbackListApi } from "@/api/feedback/feedbacklist";
import { commonFeedBackMixin } from "../mixins/commonMixin";

export default {
  name: "FeedBackList",
  mixins: [commonFeedBackMixin],
  components: { FeedBackTable },
  data() {
    return {
      feedbackList: [],
      total: 0,
    };
  },
  methods: {
    // 查询按钮操作
    handleQuery() {
      this.getFeedbackList();
    },
    // 重置按钮操作
    resetQuery() {
      // 重置body对象
      this.body = {
        isHandled: null,
        phoneNumber: "",
        name: "",
        feedbackType: "",
        handler: "",
        startHandlingTime: "",
        endHandlingTime: "",
      };
      this.feedbackTime = []; // 清空反馈时间
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 切换分页操作
    handlePagination({ page, limit }) {
      this.queryParams = {
        ...this.queryParams,
        pageNum: page,
        pageSize: limit
      }
      this.getFeedbackList();
    },
    // 获取反馈列表数据
    async getFeedbackList() {
      try {
        const response = await getFeedbackListApi(this.queryParams, this.requestBody);
        if (response.code === 200) {
          this.total = response.total;
          this.feedbackList = response.rows;
        } else {
          console.error('API Error:', response.message);
        }
      } catch (error) {
        console.error('获取反馈列表数据失败', error);
      }
    },
    clearTime() {
      this.body.startHandlingTime = '';
      this.body.endHandlingTime = '';
    }
  },
  mounted() {
    this.getFeedbackList();
  },
};
</script>

<style lang="scss" scoped></style>
